<template>
  <!-- <Bullboard/> -->
  <!-- <Navbar/> -->
  <section class="hero">
    <video src="../../src/assets/videos/banner1.mp4" autoplay loop muted class="background-video"></video>
    <div class="content">
      <p>Far away from the hustle and bustle, wandering amidst the clouds, painting a serene picture together with the mountains, rivers, and UNIGEAR.</p>
    </div>
    <div class="scroll-down">
      <p>SCROLL</p>
      <i>↓</i>
    </div>
    <div :class="['logo-overlay',isFixed ? 'fixed' : 'absolute']">
      <img ref="logo" src="../../src/assets/images/logo.svg" alt="Logo" class="logo"/>
    </div>
  </section>
  <Video/>
  <!-- <Enchant/>
  <News/>
  <Whyung/> -->
</template>

<script setup>
import Video from '@/components/layout/Video.vue';
// import Enchant from '@/components/layout/Enchant.vue';
// import News from '@/components/layout/News.vue';
// import Whyung from '@/components/layout/Whyung.vue';
// import Bullboard from '@/components/layout/Bullboard.vue';
// import Navbar from '@/components/layout/Navbars.vue';  

import { ref, onMounted, onBeforeUnmount } from 'vue';
import { gsap } from 'gsap';
const logo = ref(null);
const logoWidth = ref(40000);//初始化logo宽度
let scale = 1;
const maxWidth = 40000;
const minWidth = 1997;
const isFixed = ref(true); // 是否固定logo
const canEnlarge = ref(true); // 是否在顶部 是否可以放大
let gsapInstance = null;

const updatePosition = () => {
  const currentWidth = logo.value.offsetWidth * scale;
  isFixed.value = currentWidth > minWidth; // 当logo宽度大于最小宽度时，固定logo
};

const updateScrollState = () => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;  
  canEnlarge.value = scrollTop === 0; // 滚动条到顶部时，可以放大
};

const handleWheel = (event) => {
  if(!canEnlarge.value)return;//不在顶部时，不处理滚动事件
  
  if(isFixed.value){
    event.preventDefault();// 阻止默认事件
  }
  const currentWidth = logo.value.offsetWidth * scale;
  if(currentWidth < maxWidth && event.deltaY < 0 && canEnlarge.value){
    scale += 0.1;//放大
  } else if(currentWidth > minWidth && event.deltaY > 0){
    scale -= 0.1;//缩小
  }

  scale = Math.max(minWidth / logo.value.offsetWidth,Math.min(scale, maxWidth / logo.value.offsetWidth));
  
  if(gsapInstance){
    gsapInstance.kill();
  }
  updatePosition();//更新logo位置
  gsap.to(logo.value, { scale: scale, duration: 0.5,ease: 'power2.out' });
};

onMounted(() => {
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  canEnlarge.value = scrollTop === 0;

  window.addEventListener('wheel', handleWheel,{ passive: false }); // passive: false 阻止默认事件
  window.addEventListener('scroll', updateScrollState);
});

onBeforeUnmount(() => {
  window.removeEventListener('wheel', handleWheel);
  window.removeEventListener('scroll', updateScrollState);
});
</script>

<style scoped>
.hero {
  position: relative;
  height: 100vh;
  color: white;
  text-align: center;
  overflow: hidden;
}

.background-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 1;
  top: 50%;
  transform: translateY(-50%);
  padding: 0 20px;
}

p {
  font-size: 1.5em;
  width: 50%;
  margin: 0 auto;
}

.scroll-down {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  text-align: center;
}

.scroll-down p {
  margin: 0;
  font-size: 1em;
}

.scroll-down i {
  font-size: 1em;
  animation: bounce 2s infinite;
}

.logo-overlay {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo-overlay.fixed {
  position: fixed;
  pointer-events: none;
}

.logo-overlay.absolute {
  position: absolute;
  pointer-events: auto;
}

.logo {
  width: 40000px;
  max-height: 100%;
  transform-origin: center;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
</style>